<template>
  <div>
    <div class="login_wrap">
      <a-tabs defaultActiveKey="0">
        <a-tab-pane
          :key="item.key"
          :tab="item.tab"
          v-for="item in data"
          forceRender
        >
          <div :is="item.component"></div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import StudentLogin from "@/components/Student/Login";
import TeacherLogin from "@/components/Teacher/Login";
export default {
  data() {
    return {
      data: [
        { key: "0", tab: "学生登录", component: "StudentLogin" },
        { key: "1", tab: "教师登录", component: "TeacherLogin" },
      ],
    };
  },
  components: {
    StudentLogin,
    TeacherLogin,
  }
};
</script>

<style lang="less" scoped>
.login_wrap {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  margin-top: -8%;
}
.ant-tabs {
  width: 20%;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 5px #888888;
}
</style>
